import { Form, Input, Button, Space, Table, Modal, message } from 'antd'
import type { FormProps, TableProps } from 'antd';
import axios from './utils/axios'
import './App.css'
import { useEffect, useState } from 'react';
type FieldType = {
  title?: string;
};
interface FieldTypeModal {
  title: string,
  content: string
  authorId: number
}
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}


const App = () => {
  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Firstname',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'lastname',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'username',
      key: 'viewCount',
      dataIndex: 'viewCount',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={() => editHandle(record)}>编辑</Button>
          <Button danger>删除</Button>
        </Space>
      ),
    },
  ];
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isView, setIsView] = useState<boolean>(true)
  const [form] = Form.useForm()
  const [data, setData] = useState([])
  const [id, setId] = useState(null)
  const getDataList = async (title?: string) => {
    const res = await axios.get('/article/list', {
      params: {
        page,
        pageSize,
        keyword: title
      }
    })
    // console.log(res)
    const { data, status } = res
    if (status === 200) {
      setData(data.rows)
    }
  }
  useEffect(() => {
    getDataList()
  }, [])
  // 搜索
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {

    const { title } = values
    getDataList(title)
  };
  // 重置
  const resetHandle = () => {
    getDataList()
  }
  // modal
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 新增
  const addHandle = () => {
    setIsModalOpen(true)
    setIsView(true)
    form.resetFields()
  }
  // 编辑
  const editHandle = (record: any) => {
    console.log(record)
    setIsModalOpen(true)
    setIsView(false)
    form.setFieldsValue(record)
    setId(record.id)
  }
  // 
  const EditAndAddHandle = async (values: any) => {
    console.log(values)
    if (isView) {
      const res = await axios.post('/article', {
        title: values.title,
        content: values.content,
        authorId: 47529555
      })
      console.log(res)
      const { status } = res
      if (status === 200) {
        getDataList()
        message.success('新增成功')
      }
    }
    else {
      const res = await axios.put(`/article/${id}`, { values })
      console.log(res)
    }
    setIsModalOpen(false)
  }
  return (
    <div className='table'>
      {/* 顶部搜索 */}
      <div className='top'>
        <Form
          className='top-form'
          name="basic"
          // labelCol={{ span: 8 }}
          // wrapperCol={{ span: 1 }}
          style={{ maxWidth: 700 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<FieldType>
          >
            <Button type='primary' onClick={() => addHandle()}>新增</Button>
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="reset" onClick={() => resetHandle()}>
              重置
            </Button>
          </Form.Item>
          <Form.Item<FieldType>
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>
        </Form>
      </div>
      <div>
        <Table<DataType> rowKey='id' columns={columns} dataSource={data} />
      </div>
      <Modal
        title={isView ? '新增' : '编辑'}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        cancelText='取消'
        okText='确定'
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}

          name="basic1"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 700 }}
          initialValues={{ remember: true }}
          onFinish={EditAndAddHandle}
          autoComplete="off"
        >
          <Form.Item<FieldTypeModal>
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeModal>
            label="内容"
            name="content"
          >
            <Input />
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              {isView ? '添加' : '保存'}
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default App